<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    
<title>Projec: Switch and Meter</title>

    
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svg.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svganim.min.js"></script>
    
<script type="text/javascript">
/*      function switch_click(evt){ 
        alert(evt.target.id);
        var animation = evt.target.siblings( "animation");
      }
      
*/
      $(document).ready( function() {
      
        switch1_isClosed = true;
 
      
        $("#svg").width(1000).height(1000);
        $("#svg").svg();
        var wrapper = $("#svg").svg('get');
            
        wrapper.load("SVG/switch.svg",
          {
            onLoad: onLoad
          }
        );
        
        $("#meter_svg").width(1000).height(1000);
        $("#meter_svg").svg();
        var meter_wrapper = $("#meter_svg").svg('get');
        
        meter_wrapper.load("SVG/meter.svg",
          {
            onLoad: meter_onLoad
          }
        );
   
        function onLoad(){
        
          
          $("g#switch1").click ( function() {
              if( switch1_isClosed == true ){
              
                //alert("true");
                switch1_isClosed = false;
                $(this).animate( {svgTransform: 'rotate(30)'}, 1000);
              
              } else {
                //alert("false");
                switch1_isClosed = true;
                $(this).animate( {svgTransform: 'rotate(0)'}, 1000);

              }
              
            }
          );
        
        }
   
       function meter_onLoad(){
                  
          $("g#meter").click ( function() {
          
              var movement = $("g#meter").children("g#meter_movement");
              if( switch1_isClosed == true ){
                 //alert("true");             
                              
                //get each children and stop or start the animation
                movement.children().each( function() {
                  var node = $(this);
                  var animation = node.children();
                  animation.attr("dur", "6s");
                 } //end function
                ); //end each function on children
                
                //var nodes = $(movement).children();
                //odes.setAttribute("id", "yes");
              
              } else {
              
                //alert("false");
                //get each children and stop or start the animation
                movement.children().each( function() {
                  var node = $(this);
                  var animation = node.children();
                  animation.attr("dur", "0s");
                 } //end function
                ); //end each function on children
                
              } //end else
              
            } //end function
          ); //end click function
        
        } //end meter_onLoad function
    
   
            
     //   svg = document.getElementById( "switch_svg").getSVGDocument();
      //  switch1 = svg.getElementById( "switch1");
          
           
      //  $('g#switch1').click( function( event) {
        
      //    switch1.setAttribute("transform", rotate(30));
     
      //    alert("clicked");
          //var animation = $(this).child().siblings( "animation");
       //   var svg = document.getElementById( "switch_svg").getSVGDocument();
       //   var animation = svg.getElementById( "animation");

          
       //   animation.attr("from", 30);
       //   animation.attr("to", 0);
        
          //switch1_isClosed = false;
        


        
        
        
       //   } //end event function
      //  ); //end click function
        
      
  
        } //end function
      ); //end ready
    
    
    </script>
  </head>
<body>
    
<h1> Switch test </h1>

    
<div id="svg"> </div>

    
<div id="meter_svg"> </div>

  </body>
</html>